<template>
  <el-dialog
    v-el-drag-dialog
    title="批量操作"
    width="450px"
    :visible.sync="visible"
    @closed="reset"
  >
    <el-form ref="dataForm" label-position="right" label-width="80px">
      <el-form-item label="就近门市:" prop="orgSNNo">
        <el-tree-select
          v-model="orgSNNo"
          clearable
          class="tree-select"
          :popover-width="360"
          :select-params="{
            clearable: true,
            placeholder: '请选择',
          }"
          :tree-params=" {
            'expand-on-click-node': false,
            'highlight-current': true,
            'filterable': true,
            props:{
              value:'orgSNNo',
              label: 'orgName',
              disabled: 'disabled',
            },
            data: treeData
          }"
          @node-click="selectTreeChange"
        />
      </el-form-item>
      <el-form-item label="销售人员:">
        <el-input v-model="salesmanName" clearable disabled>
          <el-button slot="append" class="append-search" @click="salesmanName ? onDelete() : search()">{{ salesmanName ? '清空' : '查询' }}</el-button>
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reset">取 消</el-button>
      <el-button type="primary" @click="success">确 定</el-button>
    </span>
    <salesman ref="salesman" :tree-data="treeData" @upDaAll="upDaAll" />
  </el-dialog>
</template>

<script>
  import { customerTransactionUpdate } from '@/api'
  import Salesman from './Salesman'
  export default {
    name: 'up-data-all',
    components: {
      Salesman
    },
    props: {
      treeData: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        visible: false,
        orgSNNo: '',
        salesmanName: '',
        isFlag: false,
        list: [],
        json: {}
      }
    },
    methods: {
      open(temp) {
        this.list = temp
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 就近门市选择
      selectTreeChange(value) {
        this.json.orgSNNo = value.orgSNNo
        this.json.nearStation = value.orgId
        this.json.nearStationName = value.orgName
        this.isFlag = true
      },
      // 销售人员
      upDaAll(val) {
        if (val) {
          this.salesmanName = val.userName
          this.json.salesman = val.userId
          this.json.salesmanName = val.userName
        }
      },
      // 删除
      onDelete() {
        this.salesmanName = ''
        if (this.json.salesman) delete this.json.salesman
        if (this.json.salesmanName) delete this.json.salesmanName
        this.isFlag = !!this.orgSNNo
      },
      // 查询
      search() {
        this.$refs.salesman.open()
      },
      async success() {
        if (this.salesmanName !== '') this.isFlag = true
        if (!this.isFlag) {
          this.$message.warning('就近门市、销售人员至少修改一个')
          return
        }
        const csmIds = []
        this.list.map(l => csmIds.push(l.csmId))
        try {
          await customerTransactionUpdate({
            csmIds: csmIds.join(),
            json: this.json
          })
          this.reset()
          this.$message.success('批量编辑成功!')
          // 更新列表
          this.$emit('upDataTable')
        } catch (error) {
          console.log(error)
        }
      },
      reset() {
        this.visible = false
        this.orgSNNo = ''
        this.salesmanName = ''
        this.isFlag = false
        this.list = []
        this.json = {}
      }
    }
  }

</script>
